<template>
  <div>
    <x-form ref="xForm" v-model="formData" :config="formConfig">
      <template #executionListener>
        <el-badge :value="executionListenerLength">
          <el-button
            size="small"
            @click="dialogName = 'executionListenerDialog'"
            >编辑</el-button
          >
        </el-badge>
      </template>
      <template #taskListener>
        <el-badge :value="taskListenerLength">
          <el-button size="small" @click="dialogName = 'taskListenerDialog'"
            >编辑</el-button
          >
        </el-badge>
      </template>
      <template #multiInstance>
        <el-badge :is-dot="hasMultiInstance">
          <el-button size="small" @click="dialogName = 'multiInstanceDialog'"
            >编辑</el-button
          >
        </el-badge>
      </template>
    </x-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
    <taskListenerDialog
      v-if="dialogName === 'taskListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishTaskListener"
    />
    <multiInstanceDialog
      v-if="dialogName === 'multiInstanceDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishMultiInstance"
    />
  </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel";
import executionListenerDialog from "./property/executionListener";
import taskListenerDialog from "./property/taskListener";
import multiInstanceDialog from "./property/multiInstance";
import { commonParse, userTaskParse } from "../../common/parseElement";
export default {
  components: {
    executionListenerDialog,
    taskListenerDialog,
    multiInstanceDialog,
  },
  mixins: [mixinPanel],
  props: {
    users: {
      type: Array,
      required: true,
    },
    groups: {
      type: Array,
      required: true,
    },
    forms: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      userTypeOption: [
        { label: "指定人员", value: "assignee" },
        { label: "候选人员", value: "candidateUsers" },
        { label: "候选组", value: "candidateGroups" },
      ],
      dataTypeOption: [
        { label: "固定", value: "fixed" },
        { label: "动态", value: "dynamic" },
      ],
      dialogName: "",
      executionListenerLength: 0,
      taskListenerLength: 0,
      hasMultiInstance: false,
      formData: {},
    };
  },
  computed: {
    formConfig() {
      const _this = this;
      return {
        inline: false,
        item: [
          {
            xType: "input",
            name: "id",
            label: "节点 id",
            rules: [{ required: true, message: "Id 不能为空" }],
          },
          {
            xType: "input",
            name: "name",
            label: "节点名称",
            rules: [{ required: true, message: "节点名称不能为空" }],
          },
          {
            xType: "input",
            name: "documentation",
            label: "节点描述",
          },
          {
            xType: "slot",
            name: "executionListener",
            label: "执行监听器",
          },
          {
            xType: "slot",
            name: "taskListener",
            label: "任务监听器",
            show: !!_this.showConfig.taskListener,
          },
          {
            xType: "select",
            name: "userType",
            label: "人员类型",
            dic: _this.userTypeOption,
            show: !!_this.showConfig.userType,
          },
          {
            xType: "radio",
            name: "dataType",
            label: "指定方式",
            dic: _this.dataTypeOption,
            show: !!_this.showConfig.dataType,
            rules: [{ required: true, message: "请指定方式" }],
          },
          // {
          //   xType: 'input',
          //   name: 'assigneeFixed',
          //   label: '指定人(表达式)',
          //   show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
          // },
          // {
          //   xType: 'input',
          //   name: 'candidateUsersFixed',
          //   label: '候选人(表达式)',
          //   show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
          // },
          // {
          //   xType: 'input',
          //   name: 'candidateGroupsFixed',
          //   label: '候选组(表达式)',
          //   show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
          // },
          {
            xType: "select",
            name: "assignee",
            label: "指定人员",
            allowCreate: true,
            filterable: true,
            dic: { data: _this.users, label: "nickName", value: "userId" },
            show:
              !!_this.showConfig.assignee &&
              _this.formData.userType === "assignee",
          },
          {
            xType: "select",
            name: "candidateUsers",
            label: "候选人员",
            multiple: true,
            allowCreate: true,
            filterable: true,
            dic: { data: _this.users, label: "nickName", value: "userId" },
            show:
              !!_this.showConfig.candidateUsers &&
              _this.formData.userType === "candidateUsers",
          },
          {
            xType: "select",
            name: "candidateGroups",
            label: "候选组",
            multiple: true,
            allowCreate: true,
            filterable: true,
            dic: { data: _this.groups, label: "roleName", value: "roleId" },
            show:
              !!_this.showConfig.candidateGroups &&
              _this.formData.userType === "candidateGroups",
          },
          {
            xType: "slot",
            name: "multiInstance",
            label: "多实例",
          },
          {
            xType: "switch",
            name: "async",
            label: "异步",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.async,
          },
          {
            xType: "input",
            name: "priority",
            label: "优先级",
            show: !!_this.showConfig.priority,
          },
          {
            // xType: "input",
            // name: "formKey",
            // label: "表单标识key",
            // show: !!_this.showConfig.formKey,
            xType: 'select',
            name: 'formKey',
            label: '表单标识',
            filterable: true,
            allowCreate: true,
            dic:  { data: _this.forms, label: "formName", value: "formId" },

          },
          {
            xType: "input",
            name: "skipExpression",
            label: "跳过表达式",
            show: !!_this.showConfig.skipExpression,
          },
          {
            xType: "switch",
            name: "isForCompensation",
            label: "是否为补偿",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.isForCompensation,
          },
          {
            xType: "switch",
            name: "triggerable",
            label: "服务任务可触发",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.triggerable,
          },
          {
            xType: "switch",
            name: "autoStoreVariables",
            label: "自动存储变量",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.autoStoreVariables,
          },
          {
            xType: "input",
            name: "ruleVariablesInput",
            label: "输入变量",
            show: !!_this.showConfig.ruleVariablesInput,
          },
          {
            xType: "input",
            name: "rules",
            label: "规则",
            show: !!_this.showConfig.rules,
          },
          {
            xType: "input",
            name: "resultVariable",
            label: "结果变量",
            show: !!_this.showConfig.resultVariable,
          },
          {
            xType: "switch",
            name: "exclude",
            label: "排除",
            activeText: "是",
            inactiveText: "否",
            show: !!_this.showConfig.exclude,
          },
          {
            xType: "input",
            name: "class",
            label: "类",
            show: !!_this.showConfig.class,
          },
          {
            xType: "datePicker",
            type: "date",
            name: "dueDate",
            placeholder: "请选择日期",
            size: "mini",
            align: "left",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            label: "到期时间",
            pickerOptions: {
              shortcuts: [
                {
                  text: "今天",
                  onClick(picker) {
                    picker.$emit("pick", new Date());
                  },
                },
                {
                  text: "昨天",
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit("pick", date);
                  },
                },
                {
                  text: "一周前",
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit("pick", date);
                  },
                },
              ],
            },
            show: !!_this.showConfig.dueDate,
          },
        ],
      };
    },
  },
  watch: {
    "formData.userType": function (val, oldVal) {
      if (oldVal) {
        const types = ["assignee", "candidateUsers", "candidateGroups"];
        types.forEach((type) => {
          delete this.element.businessObject.$attrs[`flowable:${type}`];
          delete this.formData[type];
        });
      }
    },
    // 动态选择流程执行人
    "formData.dataType": function (val) {
      const that = this;
      this.updateProperties({ "flowable:dataType": val });
      if (val === "dynamic") {
        this.updateProperties({ "flowable:userType": that.formData.userType });
      }
      // 切换时 删除之前选中的值
      const types = ["assignee", "candidateUsers", "candidateGroups"];
      types.forEach((type) => {
        delete this.element.businessObject.$attrs[`flowable:${type}`];
        delete this.formData[type];
      });
      // 传值到父组件
      const params = {
        dataType: val,
        userType: this.formData.userType,
      };
      this.$emit("dataType", params);
    },
    "formData.assignee": function (val) {
      if (this.formData.userType !== "assignee") {
        delete this.element.businessObject.$attrs[`flowable:assignee`];
        return;
      }
      this.updateProperties({ "flowable:assignee": val });
    },
    "formData.candidateUsers": function (val) {
      if (this.formData.userType !== "candidateUsers") {
        delete this.element.businessObject.$attrs[`flowable:candidateUsers`];
        return;
      }
      this.updateProperties({ "flowable:candidateUsers": val?.join(",") });
    },
    "formData.candidateGroups": function (val) {
      if (this.formData.userType !== "candidateGroups") {
        delete this.element.businessObject.$attrs[`flowable:candidateGroups`];
        return;
      }
      this.updateProperties({ "flowable:candidateGroups": val?.join(",") });
    },
    "formData.async": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:async": val });
    },
    "formData.dueDate": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:dueDate": val });
    },
    "formData.formKey": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:formKey": val });
    },
    "formData.priority": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:priority": val });
    },
    "formData.skipExpression": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:skipExpression": val });
    },
    "formData.isForCompensation": function (val) {
      if (val === "") val = null;
      this.updateProperties({ isForCompensation: val });
    },
    "formData.triggerable": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:triggerable": val });
    },
    "formData.class": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:class": val });
    },
    "formData.autoStoreVariables": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:autoStoreVariables": val });
    },
    "formData.exclude": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:exclude": val });
    },
    "formData.ruleVariablesInput": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:ruleVariablesInput": val });
    },
    "formData.rules": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:rules": val });
    },
    "formData.resultVariable": function (val) {
      if (val === "") val = null;
      this.updateProperties({ "flowable:resultVariable": val });
    },
  },
  created() {
    let cache = commonParse(this.element);
    cache = userTaskParse(cache);
    this.formData = cache;
    this.computedExecutionListenerLength();
    this.computedTaskListenerLength();
    this.computedHasMultiInstance();
  },
  methods: {
    computedExecutionListenerLength() {
      this.executionListenerLength =
        this.element.businessObject.extensionElements?.values?.filter(
          (item) => item.$type === "flowable:ExecutionListener"
        ).length ?? 0;
    },
    computedTaskListenerLength() {
      this.taskListenerLength =
        this.element.businessObject.extensionElements?.values?.filter(
          (item) => item.$type === "flowable:TaskListener"
        ).length ?? 0;
    },
    computedHasMultiInstance() {
      if (this.element.businessObject.loopCharacteristics) {
        this.hasMultiInstance = true;
      } else {
        this.hasMultiInstance = false;
      }
    },
    finishExecutionListener() {
      if (this.dialogName === "executionListenerDialog") {
        this.computedExecutionListenerLength();
      }
      this.dialogName = "";
    },
    finishTaskListener() {
      if (this.dialogName === "taskListenerDialog") {
        this.computedTaskListenerLength();
      }
      this.dialogName = "";
    },
    finishMultiInstance() {
      if (this.dialogName === "multiInstanceDialog") {
        this.computedHasMultiInstance();
      }
      this.dialogName = "";
    },
  },
};
</script>
